.page{

	padding-bottom: 100rpx;
	
}
.head{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	height: 193.6rpx;
	 
	align-items: center;
	  
	background: url('../../../static/background.jpg');
	
	padding: 0 15px;
	.head1{
		  position: fixed;
		  top: 88rpx;
		  left: 0;
		  right: 0;
		  z-index: 999;
		   height: 88rpx;
		   display: flex;
		   align-items: center;
		   
		  
		   text{
		   		  font-size: 30rpx;
				  font-weight: bold;
		   }
		   text:first-child{z-index: 999;
		   		  margin-left: 30rpx;
				   font-size: 30rpx;
		   }
	  }
	  
}
.main{
	position: relative;
	top: 193.6rpx;
	margin-bottom: 150rpx;
	.banner{
			
			height: 334.88rpx;
		image{
			width: 100%;
			height: 334.88rpx;
			
		}
			
		}
	//商品
	.store{
			background-color: #FFFFFF;
			margin:14rpx 14rpx 0 14rpx;
			padding: 17.44rpx;
			border-radius: 7rpx;
			box-shadow: 0rpx 0rpx 10.47rpx 0rpx rgba(0,0,0,0.16);
			
			.detail2{
				display: flex;
				border-bottom: 1rpx solid #ccc;	
				padding-bottom:11.37rpx ;
				image{
					width: 137.79rpx;
					height: 137.79rpx;
					background: rgba(0,0,0,0.00);
					border-radius: 6.78rpx;
					margin-right: 17.44rpx;
				}
				.right{
					width: 80%;
					.title{
						
						display: flex;
						justify-content: space-between;
						.left{
						
							font-size: 29.65rpx;
							font-weight: bold;
						}
						.icon{
							display: flex;
							.icon-info{
									
									text-align: center;
									text{
										font-size: 22rpx;
										
									}
									.dingwei{
									font-size: 17.44rpx;
										text-align: center;
										
									}
								
								}
								.icon-info:first-child{
									margin-right: 25.54rpx;
								}
						}
					}
					.detail{
						margin-top: 46.28rpx;
						display: flex;
						justify-content: space-between;
					
						.time{
							font-size: 17.44rpx;
							font-weight: bold;
						}
						.price{
							font-size: 17.44rpx;
							
						}
					}
					
				} 
			}
			
			.detail1{
				display: flex;
				justify-content: space-between;
				padding-top: 20rpx;
				
				.left{
					width: 70%;
					
					.address{
						
						font-size: 17.44rpx;
						line-height: 17.44rpx;
						font-weight: bold;
						.icon-info{
							display: flex;
							margin-bottom: 10rpx;
							text{
								font-size: 15.7rpx;
							}
						}
						text{
							font-size: 21rpx;
						}
					}
					.distance{
						font-size: 24rpx;
						
					}
				}
				.right{
					
					display: flex;
				
					.icon-info{
						margin-right: 15.7rpx;
						text-align: center;
						color: #646464;
						// .icon{
						// 	width: 33.14rpx;
						// 	height: 33.14rpx;
						// 	background: #e3e3e3;
						// 	border-radius: 50%;
						// 	align-items: center;
						// 	line-height: 33.14rpx;
						// 	text{
						// 		font-size: 15.7rpx;
								
						// 	}
						// }
						.icon {
						    width: 33.14rpx;
						    height: 33.14rpx;
						    background: #e3e3e3;
						    border-radius: 50%;
						    display: flex;
						    justify-content: center; /* 水平居中 */
						    align-items: center;     /* 垂直居中 */
						    line-height: 33.14rpx;   /* 保证行高与高度一致，垂直居中文本 */
						}
						
						.icon text {
						    font-size: 15.7rpx;
						    text-align: center;  /* 使文本内容水平居中 */
						}

						
						.dingwei{
							font-size: 17.44rpx;
							text-align: center;
							
						}
					
					}
				}
			}
		}
	
	.title1{
			display: flex;
			justify-content: space-between;
			padding: 15.7rpx 14rpx 0 14rpx;
			
			.left{
				width: 118.6rpx;
				height: 36.63rpx;
				font-size: 29.65rpx;
				font-family: "Microsoft JhengHei UI", "Microsoft JhengHei UI-Bold";
				font-weight: 700;
				text-align: left;
				color: #000000;
				margin: 31rpx 0 22.5rpx 14rpx;
				
				background: linear-gradient(136deg, rgba(51, 202, 165, 1)  0%, rgba(255, 255, 255, 1) 100%);
				background-position: bottom; /* Position the gradient at the bottom */
				background-repeat: no-repeat; /* Ensure the gradient doesn't repeat */
				background-size: 100% 50%; /* Make the background take up only the bottom half of the element */
				
			}
			.icon-info{
				display: flex;
				line-height: 36.63rpx;
				margin: 31rpx 0 22.5rpx 14rpx;
				text{
					font-size: 17.44rpx;
					margin-right: 13.5rpx;
					
					
				}
				.dingwei{
					width: 87.21rpx;
					height: 22.67rpx;
					font-size: 17.44rpx;
					font-family: Microsoft JhengHei UI, Microsoft JhengHei UI-Bold;
					font-weight: 700;
					text-align: right;
					color: #646464;
					
				}	
			}
		}
		
	.menu{
	
			background-color: #FFFFFF;
			border-radius: 6.8rpx;
			margin:14rpx 14rpx 0 14rpx;
			padding: 19rpx;
				display: flex;
				 overflow-x: auto;  
			box-shadow: 0rpx 0rpx 10.47rpx 0rpx rgba(0,0,0,0.16);
				    
			.image{
				text-align: center;
				padding-right: 20.9rpx;
				image{
					width: 146.51rpx;
					height: 146.51rpx;
					background: rgba(0,0,0,0.00);
					border-radius: 10rpx;
					
				}
				text{
					 display: block;
					 width: 146.51rpx;
					  white-space: nowrap; /* 不换行 */
					  overflow: hidden; /* 超出部分隐藏 */
					  text-overflow: ellipsis; /* 超出的文本显示省略号 */
					
					font-size: 17.44rpx;
					font-family: Leelawadee UI, Leelawadee UI-Bold;
					font-weight: 700;
					text-align: center;
					color: #000000;
					
				}
				
				
				}
			
	}
	.appraise{
		margin:14rpx 14rpx 0 14rpx;
		padding: 19rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 0rpx 10.47rpx 0rpx rgba(0,0,0,0.16);
		display: flex;
		.appraise-content{
			
			font-size: 24rpx;
			margin-right: 10.7rpx;
			image{
				width: 45.35rpx;
				height: 45.35rpx;
				background: rgba(0,0,0,0.00);
				border-radius: 50%;
				
			}
			
			
		}
		.content{
			
			.top{
			
				height: 45.35rpx;
				line-height: 45.35rpx;
				font-size: 20.93rpx;
				font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
				font-weight: 700;
				text-align: left;
				color: #000000;
			}
			.center{
				
				margin: 24rpx 0 17rpx 0;
			
				font-size: 20.93rpx;
				font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
				font-weight: 400;
				text-align: left;
				color: #000000;
				 height: auto;             /* 高度自适应 */
				  display: -webkit-box;     /* 必须使用这个来启用多行文本截断 */
				  -webkit-line-clamp: 2;    /* 设置最大显示行数为2行 */
				  -webkit-box-orient: vertical; /* 设置排列方式为垂直排列 */
				  overflow: hidden;         /* 隐藏多余的文本 */
				  text-overflow: ellipsis;  /* 超过部分显示省略号 */
				
			}
			.bottom{
				display: flex;
				justify-content: space-between;
				.address{
					
					font-size: 17.44rpx;
					font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
					font-weight: 400;
					text-align: left;
					color: #646464;
				}
				.date{
					
					font-size: 17.44rpx;
					font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
					font-weight: 400;
					text-align: left;
					color: #646464;
				}
			}
			.border{
				margin-top: 15rpx;
				
				height: 0rpx;
				background: rgba(0,0,0,0.00);
				border: 0.87rpx solid #bcbcbc;
			}
		}
	}
	.recommend{
		margin:14rpx 14rpx 0 14rpx;
		padding: 19rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 0rpx 10.47rpx 0rpx rgba(0,0,0,0.16);
		.recommend-content{
			display: flex;

			
			image{
			width: 75rpx;
			height: 75rpx;
			background: rgba(0,0,0,0.00);
			margin-right: 11.34rpx;
			}
			.user{
					width: 90%;
				.top{
				
					display: flex;
					justify-content: space-between;
					.left{
						
						font-size: 27.91rpx;
						font-family: Microsoft JhengHei UI, Microsoft JhengHei UI-Bold;
						font-weight: 700;
						text-align: left;
						color: #000000;
					}
					.right{
						
						font-size: 17.44rpx;
						font-family: Microsoft JhengHei UI, Microsoft JhengHei UI-Regular;
						font-weight: 400;
						text-align: right;
						color: #646464;
					}
				}
				.bottom{
					display: flex;
					margin-top: 20rpx;
					
					font-size: 17.44rpx;
					font-family: Microsoft JhengHei UI, Microsoft JhengHei UI-Bold;
					font-weight: 700;
					text-align: left;
					color: #000000;
					.center{
						margin: 0 5rpx;
					}
				}
			}
			
		}
		}
	
}
